<template>
  <!--    添加车间的设置-->
    <add-workshop-dialog :visible="addWorkshopDialogVisible" @callClosed="handleDialogClosed" :info="selectedInfo"
                         :is-edit="isEdit"/>


    <div style="height: 100%">
        <div class="main-title">车间设置</div>
        <el-form inline>
            <el-form-item label="车间名称">
                <el-input v-model="queryData.name" placeholder="请输入车间名称"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="queryData.emp" placeholder="输入负责人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">
                    <span>搜索</span>
                </el-button>
                <el-button type="default" @click="handleReset">
                    <bar-icon :icon="'restart'" :width="15" :height="15" :color="'#1890ff'"/>
                    <span>重置</span>
                </el-button>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button-group>
                    <el-button type="primary" @click="handleAdd">
                        <bar-icon :icon="'add'" :width="15" :height="15" :color="'#ffffff'"/>
                    </el-button>

                    <el-button :disabled="this.selections.length === 0" type="danger" @click="handleDelete">
                        <bar-icon :icon="'delete'" :width="15" :height="15" :color="'#ffffff'"/>
                    </el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" height="600" @selectionChange="handleSelecedChanged">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="name" label="车间名称"></el-table-column>
            <el-table-column prop="emp" label="负责人"></el-table-column>
            <el-table-column label="车间状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
                    <el-tooltip v-else
                        content="该记录已废弃，点击此处可恢复"
                        placement="top">
                        <el-tag style="cursor:pointer;" @click="handleReNew(scope.row)" type="danger">已废弃</el-tag>

                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="area" label="面积"></el-table-column>
            <el-table-column prop="createtime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <bar-icon :icon="'edit'" style="cursor:pointer;" @click="handleUpdate(scope.row)" :width="15"
                              :height="15" :color="'#2664ff'"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style=""
                       @change="selectionChanged"
                       layout="prev, pager, next"
                       :total="total">
        </el-pagination>
    </div>
</template>

<script>
import BarIcon from "@/components/widget/icon/BarIcon.vue";
import workshopAPI from "@/util/request-md/workshop/workshop.js";
import AddWorkshopDialog from "@/components/widget/dialog/WorkshopDialog.vue";

export default {
    name: 'workshop.vue',
    components: {AddWorkshopDialog, BarIcon},
    data() {
        return {
            tableData: [],
            queryData: {
                name: '',
                emp: '',//负责人名称
                page: 1,
                limit: 10
            },
            isEdit: false,
            selections: [],//作为批量删除的容器
            selectedInfo: {},
            addWorkshopDialogVisible: false,
            total: 0,
        }
    },
    methods: {
        handleDialogClosed() {
            this.addWorkshopDialogVisible = false;
        },
        handleReNew(data){
            workshopAPI.deleteWorkshop({id:data.idWorkshop,status:1},res=>{
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '恢复成功!'
                    });
                    this.loadData();
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        loadData() {
            workshopAPI.getWorkshopsByName(this.queryData, (data) => {
                if (data.code === 200) {
                    this.tableData = data.data;
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
            workshopAPI.getCount(res => {
                if (res.code === 200) {
                    this.total = res.data;
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        handleUpdate(data) {
            this.selectedInfo = data;
            this.isEdit = true;
            this.addWorkshopDialogVisible = true;

        },
        selectionChanged(currentPage) {
            this.queryData.page = currentPage;
            this.loadData();
        },
        //搜索
        handleQuery() {
            this.loadData();
        },
        handleReset() {
            this.queryData.name = '';
            this.queryData.emp = '';
            this.queryData.page = 1;
            this.loadData();
        },
        handleDelete() {
            this.selections.map(item => {
                console.log(item);
                workshopAPI.deleteWorkshop({id:item.idWorkshop,status:0}, res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功,请尝试重置刷新数据');
                    } else {
                        this.$message.error(`网络异常:${res.msg}`);
                    }
                })
            });
        },
        //弹出添加弹窗
        handleAdd() {
            this.selectedInfo = {};
            this.isEdit = false;
            this.addWorkshopDialogVisible = true;
        },
        handleSelecedChanged(data) {
            for (let i = data.length - 1; i >= 0; i--) {
                if (data[i].status === 0) {
                    //提示不允许选择车间已经废弃的记录
                    this.$message.error('不允许选择车间已经废弃的记录');
                    this.selections = [];
                    return;
                }
            }
            this.selections = data;
        }
    }, mounted() {
        this.loadData();
    }
}
</script>

<style></style>